<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模型上传</title>
  <!-- 页面样式框架 -->
  <script src="//preview.mobox3d.com/modelbox-sdk/layui/layui.js"></script>
  <link rel="stylesheet" type="text/css" href="//preview.mobox3d.com/modelbox-sdk/layui/css/layui.css"/>
  <!-- 页面样式框架 -->
  <!-- 引入 sdk -->
  <script src="../dist/modelbox-sdk.js"></script>

  <style>
      .container {
          width: 80%;
          margin: 0 auto;
      }
  </style>
</head>

<body>
<div class="container">
  <h1>modelbox-sdk</h1>
  <hr>
  <blockquote class="layui-elem-quote">
    本页面用于展示模型上传的基础能力，代码仓库地址：
    <a href="https://github.com/wangerzi/modelbox-sdk" target="_blank">https://github.com/wangerzi/modelbox-sdk</a>
  </blockquote>
  <form action="" class="layui-form" id="modelForm">
    <div class="layui-form-item">
      <div class="layui-form-label">成功样例</div>
      <div class="layui-input-block">
        <iframe src="https://preview.mobox3d.com/index.html#/PreviewModel/EAAYIrBA" width="600" height="400" style="border: none;"></iframe>
        <p>测试模型文件下载链接：<a href="http/://model-box-prod-resource.mobox3d.com/uploads/20201108/xaVBEAAovuoIAMsE.stl" target="_blank">点我下载</a></p>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">模型类型</label>
      <div class="layui-input-block">
        <select name="type">
          <option value="stl">STL模型(.stl/.zip)</option>
          <option value="stp">STP模型(.stp/.step/.zip)</option>
          <option value="iges">IGS模型(.igs/.iges/.zip)</option>
          <option value="fbx">FBX模型(.fbx/.zip)</option>
          <option value="gltf">GLTF模型(.gltf/.glb/.zip)</option>
          <option value="obj">OBJ模型(.obj/.zip)</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">模型名称</div>
      <div class="layui-input-block">
        <input type="text" name="name" value="Demo model" required class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">备注</div>
      <div class="layui-input-block">
        <input type="text" name="comment" value="No comment" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">配置</div>
      <div class="layui-input-block">
        <textarea name="config" cols="30" rows="10" class="layui-textarea">{"color": "#fff"}</textarea>
        <p>注：此功能进一步开发中，能实现编辑器的全部配置编辑：<a href="https://preview.mobox3d.com/index.html#/Manage/editor/EAAYIrBA" target="_blank">编辑器示例</a></p>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">选择文件</div>
      <div class="layui-input-block">
        <input type="file" name="model" required>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-primary" type="button" onclick="handleSubmit()">保存表单</button>
      </div>
    </div>
  </form>

</div>
</body>

<script>
  layui.use(['form'], function () {
  });

  /**
   * 处理表单提交
   */
  function handleSubmit() {
    var form = document.getElementById('modelForm');
    // 1. 拿到文件数据和类型
    var file = form.querySelector('input[type="file"]');
    var type = form.querySelector('select[name="type"] option:checked').value;

    if (!file.files || !file.files.length) {
      return false;
    }

    var name = form.querySelector('input[name="name"]').value;
    var comment = form.querySelector('input[name="comment"]').value;
    var configJson = form.querySelector('textarea[name="config"]').value;
    var config = {};
    if (configJson) {
      config = JSON.parse(configJson);
    }

    // 【UI】做个 loading
    var layerIndex = layui.layer.msg("文件上传中...", {time: 0, shade: 0.3});
    // 2. 拿到回调之后提交数据库保存
    MODELBOX_SDK.updateToken('5c06b6b8a548d8911e3ccdbdc518fac6');
    MODELBOX_SDK.uploadModel({
      file: file.files[0],
      type: type,
      config: {
        'name': name,
        'comment': comment,
      },
      modelConfig: config,
      success: function (res) {
        layui.layer.close(layerIndex);
        // res.iframe_url 表示嵌入网页的 url
        // res.source_file_url 表示源资源的下载 url
        layui.layer.open({
          type: 2,
          title: name,
          btn: [
            '新窗口打开',
            '场景编辑器（测试中，敬请期待）',
            '下载源文件',
          ],
          btnAlign: 'c',
          btn1: function () {
            window.open(res.iframe_url);
            return false;
          },
          btn2: function () {
            window.open(res.editor_url);
            return false;
          },
          btn3: function () {
            window.open(res.source_file_url);
            return false;
          },
          area: ['600px', '400px'],
          content: res.iframe_url,
        });
      },
      error: function (msg) {
        layui.layer.close(layerIndex);
        // 这里用到了 UI 框架的提示组件 layer ，根据具体业务情况处理即可
        layui.use(['layer'], function () {
          layui.layer.alert(msg);
        })
      },
    });
    return false;
  }
</script>

</html>
